<template>
	<section>
		<el-row>
			<!--工具条1-->
			<!--如果有更多工具条,放开此注释
			<el-col :span="24" class="toolbar"  style="padding-bottom: 0px;">
				<el-col :span="4">
				</el-col>
			</el-col>
			-->

			<!--新增界面 Ad pub_ad-->
			<el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm">

				<el-form-item label="广告位置" prop="positionId">
					<el-tag>{{position.name}}</el-tag>
				</el-form-item>

				<el-form-item label="广告名称" prop="name">
					<el-input v-model="addForm.name" auto-complete="off" style="width: 50%;"></el-input>
				</el-form-item>
        <el-form-item label="广告内容" prop="content">
          <el-input v-model="addForm.content" auto-complete="off" type="textarea"
                    autosize placeholder="请输入内容" style="width: 50%;"></el-input>
        </el-form-item>
        <el-form-item label="广告主图" prop="imageUrl">
          <single-shear-upload :img-width="400" :img-height="240" :show-title="true" v-model="addForm.imageUrl" :deptid="userInfo.deptid"
                               :branch-id="userInfo.branchId" :remark="addForm.name">
            <span slot="title">选择上传文件</span>
          </single-shear-upload>
        </el-form-item>
        <el-form-item label="广告副图" prop="extraImage">
          <single-shear-upload :img-width="400" :img-height="240" :show-title="true" v-model="addForm.extraImage" :deptid="userInfo.deptid"
                               :branch-id="userInfo.branchId" :remark="addForm.name">
            <span slot="title">选择上传文件</span>
          </single-shear-upload>
        </el-form-item>
        <el-form-item label="小图标" prop="smallImage">
          <single-shear-upload :img-width="400" :img-height="240" :show-title="true" v-model="addForm.smallImage" :deptid="userInfo.deptid"
                               :branch-id="userInfo.branchId" :remark="addForm.name">
            <span slot="title">选择上传文件</span>
          </single-shear-upload>
        </el-form-item>
        <el-form-item label="商品价格" prop="goodsPrice">
          <el-input-number v-model="addForm.goodsPrice" auto-complete="off" style="width: 50%;"
                           placeholder="请输入数字" :controls="false" :min="0"></el-input-number>
        </el-form-item>
				<el-form-item label="广告链接" prop="link">
					<el-input v-model="addForm.link" auto-complete="off" style="width: 50%;"></el-input>
				</el-form-item>
        <el-form-item label="广告备注" prop="remark">
          <el-input autosize type="textarea" v-model="addForm.remark" placeholder="广告备注" style="width: 50%;"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker type="datetime" placeholder="选择日期" v-model="addForm.startTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
				<el-form-item label="结束时间" prop="endTime">
					<el-date-picker type="datetime" placeholder="选择日期" v-model="addForm.endTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
				</el-form-item>
				<el-form-item label="上线/下线" prop="enabled">
          <template>
            <el-radio-group v-model="addForm.enabled">
              <el-radio :label="'1'">上线</el-radio>
              <el-radio :label="'0'">下线</el-radio>
            </el-radio-group>
          </template>
				</el-form-item>
        <el-form-item label="排序" prop="sortOrder">
          <el-input-number v-model="addForm.sortOrder" :min="0"></el-input-number>
        </el-form-item>
<!--        <el-form-item label="点击次数" prop="clickNum">
          <el-input-number v-model="addForm.clickNum" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="生成订单" prop="clickNum">
          <el-input-number v-model="addForm.saleNum" :min="0"></el-input-number>
        </el-form-item>-->
				<el-form-item>
          <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
          <el-button @click.native="handleCancel">取消</el-button>
				</el-form-item>
			</el-form>
		</el-row>
	</section>
</template>

<script>
	import util from '@/common/js/util'; //全局公共库
	//import CategoryTree from '../../pub/category/CategoryTree'; //树
	import {addAdvert,addAdvertOnly} from '@/api/mdp/arc/ad/advert';
	import VueEditor from '@/components/Tinymce/index';
	//import RichEditor from '../editor/RichEditor';
	import {mapGetters} from 'vuex'; 
  //import goodsList from './goodsList';//回显选择的商品
	export default {
		props: ['position', 'advert', 'visible'],
		watch: {
			'advert': function(ad) {
				//this.addForm = ad;
				//this.addForm = Object.assign(this.addForm, ad);
				this.addForm = Object.assign({}, ad);
			},
			'visible': function(visible) {
				if (visible == true) {
					//从新打开页面时某些数据需要重新加载，可以在这里添加
				}
			}
		},
		data() {
			return {
				listLoading: false, //查询中...
				filters: {
					key: '',
					locationId: '',
					shopId: ''
				},
				options: {}, //下拉选择框的所有静态数据
				addLoading: false,
				addFormRules: {
					name: [{
						required: true,
						message: '广告名称不能为空',
						trigger: 'blur'
					}],
          imageUrl:[{
					  required:true,
            message:'广告图片不能为空',
            trigger:'blur'
          }],
          enabled:[{
            required: true,
            message: '请选择上线/下线情况',
            trigger: 'blur'
          }]
				},
				//新增界面数据 pub_ad
        addForm: {
          id:'',positionId:'',mediaType:'',name:'',link:'',endTime:'',enabled:'',startTime:'',imageUrl:'',locationId:'',content:'',shopId:'',shareLvl:'',adType:'',clickNum:'',showNum:'',overTime:'',saleNum:'',sortOrder:'',showPct:'',remark:'',
          extraImage:'',goodsPrice:'',smallImage:''
        },
				/**begin 在下面加自定义属性,记得补上面的一个逗号**/

				/**end 在上面加自定义属性**/
			} //end return
		}, //end data
		methods: {
      // 取消按钮点击 父组件监听@cancel="addFormVisible=false" 监听
      handleCancel: function() {
        this.$emit('cancel');
      },
			//新增提交Ad pub_ad 父组件监听@submit="afterAddSubmit"
			addSubmit: function() {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						//this.addForm.imageUrl='https://test.keyunshop.com/api/t1/arc/arc/arc/image/2018081600000001/32hmf46db8/2019/617/10/32hmw2882k.png'
						if (!this.addForm.imageUrl) {
							this.$message({
								message: '请上传广告图片',
								type: 'warning'
							});
							return;
						}
						if (!this.addForm.endTime) {
							this.$message({
								message: '请设置时间',
								type: 'warning'
							});
							return;
						} 
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							let params = Object.assign({}, this.addForm);
							params.positionId = this.position.id;
							addAdvert(params).then((res) => {
								this.addLoading = false;
								var tips = res.data.tips;
								if (tips.isOk) {
									this.$refs['addForm'].resetFields();
									this.$emit('submit'); //  @submit="afterAddSubmit"
								}
								this.$message({
									message: tips.msg,
									type: tips.isOk ? 'success' : 'error'
								});
							}).catch(() => {
								this.addLoading = false;
							});
						});
					}
				});
			},
			/**begin 在下面加自定义方法,记得补上面的一个逗号**/

			/**end 在上面加自定义方法**/

		}, //end method
		components: {
		},
		computed: {
			...mapGetters([
				'roles', 'userInfo', 'myShops', 'myLocations'
			])
		},
		mounted() {
			this.addForm = Object.assign(this.addForm, this.ad);
			//加载下拉列表 如有需要去掉注释
			/**
			let optionsParams={code:'all',fieldNames:['sex']};
			selectCacheOptions(optionsParams).then(res=>{
				this.options=res.data.data;
			});
			**/
			//给下拉列表初始化默认值
			//this.addForm.xxx=getDefaultValue(this.options.xxx,'1');
			/**在下面写其它函数***/

		} //end mounted
	}
</script>

<style scoped>

</style>
